<template>
  <div id="app">
  	<!--静态头部-->
  	<v-header v-bind:seller='seller'></v-header>
  	<!--tab栏-->
  	<div class="tab">
  		<div class="tab-item">
  			  <router-link to="/goods">商品</router-link>
  		</div>
  		<div class="tab-item">
  			<router-link to="/ratings">评论</router-link>
  		</div>
  		<div class="tab-item">
  			<router-link to="/seller">商家</router-link>
  		</div>
  	</div>
  	<!--动态页面-->
  	<keep-alive>
  		<router-view :seller="seller" class="view one"></router-view>
  	</keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
	import header from './components/header/header.vue'
	import {urlParse} from './common/js/util.js'
	const DATA_OK = true;
	export default {
	  name: 'App',
	  data(){
	  	return{
	  		seller:{
	  			id:(()=>{
						return urlParse().id
					})()
	  		}
	  	}
	  },
	  created(){
	  	this.$http.get('/api/seller?id='+this.seller.id).then((response)=>{
	  		if(response.ok == DATA_OK){
	  			//this.seller = response.body.data;
	  			this.seller = Object.assign({},this.seller,response.body.data);
	  		}
	  	})
	  },
	  components:{
	  	'v-header' : header
	  }
	}
</script>

<style>
.tab{
	display: flex;
	width: 100%;
	height: 40px;
	line-height: 40px;
	/*border-bottom: 1px solid #e4e5e7;*/
	border-bottom: 1px solid rgba(7,17,27,0.1);
}
.tab-item{
	flex: 1;
	text-align: center;
}
.tab-item a{
	display: block;
	font-size: 14px;
	color: rgb(77,85,93);
}
.tab-item .router-link-exact-active{
	color: rgb(240,20,20);
}
</style>
